<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>易养</title>
<link rel="stylesheet" href="static/layuiadmin/style/api.css">
<style>
    #main {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
        flex-flow: column;
    }
    #header {
        position: relative;
        background-color: #FF4F01;
    }
    .logo {
        position: absolute;
        left: 20px;
        bottom: 13px;
        height: 25px;
    }
    h1 {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: #fff;
        font-weight: normal;
        margin: 0 auto;
        text-align: center;
    }
    .tab {
        width: 100%;
        line-height: 50px;
        margin-top: 10px;
    }
    .txt {
        border-bottom: 1px solid #CCCCCC;
        width: 88%;
        outline: none;
        margin-left: 5px;
        line-height: 27px;
        padding-left: 5px;
    }
    .but1 {
        background-color: #FF4F01;
        width: 85%;
        height: 40px;
        color: #fff;
        border-radius: 2px;
        margin-top: 20px;
        outline: none;
    }
    .but2 {
        background-color: #fff;
        width: 85%;
        height: 38px;
        color: #FF4F01;
        border-radius: 2px;
        margin-top: 10px;
        border: 1px solid #FF4F01;
        outline: none;
    }
    .yzm {
        background-color: #FF4F01;
        height: 30px;
        width: 85px;
        color: #fff;
        font-size: 14px;
        outline: none;
    }
</style>
<body>

<div id="main">
    <img src="static/image/loginbg.png" width="100%" />
    <input type="hidden" name="id" id="id" value="${id}">
    <table class="tab">
        <tr>
            <td width="14%" align="right"><img src="static/image/yhm.png" valign="middle" height="24"/></td>
            <td width="86%" align="left" colspan="2">
                <input type="text" id="phone_number"  class="txt" placeholder="输入真实手机号"/>
            </td>
        </tr>
        <tr>
            <td align="right"><img src="static/image/mm.png" valign="middle" height="24"/></td>
            <td align="left" colspan="2">
                <input type="text" class="txt" id="password" placeholder="输入设置的密码6-9位"/>
            </td>
        </tr>
        <tr>
            <td align="right"><img src="static/image/mm.png" valign="middle" height="24"/></td>
            <td align="left" colspan="2">
                <input type="text" class="txt" id="confirm_password" placeholder="再次输入你的密码"/>
            </td>
        </tr>
        <tr>
            <td align="right"><img src="static/image/mm.png" valign="middle" height="24"/></td>
            <td align="left">
                <input type="text" class="txt" id="yzmsss" placeholder="输入短信验证码"/>
            </td>
            <td width="130">
                <input type="button" class="yzm" value="发送验证码" onclick="yam(this)"/>
            </td>
        </tr>
        <!--<tr>-->
            <!--<td align="right"><img src="static/image/mm.png" valign="middle" height="24"/></td>-->
            <!--<td align="left" colspan="2">-->
                <!--<input type="text" class="txt" placeholder="输入邀请码"/>-->
            <!--</td>-->
        <!--</tr>-->
        <tr>
            <td align="right">
                <input type="checkbox" id="xieyi" checked="checked"/>
            </td>
            <td colspan="2" align="left"> &nbsp;我已阅读并同意&nbsp;<a style="color: #FE5407">《易养注册协议》</a></td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <input type="button" class="but1" value="提交注册" onclick="regin()"/>
            </td>
        </tr>
    </table>
</div>

</body>

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    var code;
    function regin(){
        var xieyi = $('#xieyi');
        if (!xieyi.is(':checked')) {
            return json_data = {
                'status' : 0,
                'msg' : '您未勾选用户协议!'
            };
        }


        var  id= $("#id").val();
        var  password= $("#password").val();
        var  confirm_password= $("#confirm_password").val();
        var  phone_number= $("#phone_number").val();
        if ($("#yzmsss").val() != code) {
            layer.msg('验证码输入错误', {time: 1000, icon: 1}, function () {
            });
        } else {
            $.ajax({
                url: 'mobile/login/regists.json',
                method: 'post',
                data: {
                    id: id,
                    password: password,
                    confirm_password: confirm_password,
                    phone_number: phone_number
                }, success: function (ret) {
                    if (ret == 1) {
                        alert('用户已存在');

                    }
                    if (ret == 2) {
                        alert('两次密码输入不一致');
                    }
                    if (ret == 3) {

                        alert('注册成功');
                    }
                    if (ret == 4) {

                        alert('请输入手机号');
                    }
                    if (ret == 7) {

                        alert('手机号已被注册');
                    }
                }
            })
        }
    }


    function yam(t) {
        var pnones = $("#phone_number").val();
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(pnones)) {
            layer.msg('请输入有效的手机号码!', {time:1000, icon: 1},function(){

            });
            return false;
        } else {
            var time = 60;
            var myVar = setInterval(function() {
                time--;
                t.value = time + "(秒)";
                if (time == 0) {
                    clearInterval(myVar);
                    t.value = "发送验证码";
                    time = 60;
                }
            }, 1000);
            $.ajax({
                url : 'mobile/sms/list.json',
                method : 'post',
                data : {
                    phone : pnones
                },
                success : function(ret) {

                    code = ret;
                    layer.msg('发送成功', {time:1000, icon: 1},function(){

                    });

                }
            })
        }
    }
</script>
</html>